<template>
  <div class="login-page">
    <div class="page-header">
      <h1 class="title">微信一键登录</h1>
      <p class="subtitle">快速登录，无需输入密码</p>
    </div>

    <div class="container">
      <div class="login-content">
        <!-- 登录状态 -->
        <div v-if="isLoggedIn" class="user-info">
          <div class="user-card">
            <div class="avatar">
              <img :src="userInfo?.avatar" :alt="userInfo?.nickname" />
            </div>
            <div class="user-details">
              <h2>{{ userInfo?.nickname }}</h2>
              <p class="user-id">OpenID: {{ userInfo?.openid }}</p>
              <div class="user-meta">
                <span class="meta-item">
                  <i class="icon">📍</i>
                  {{ userInfo?.city }}, {{ userInfo?.province }}
                </span>
                <span class="meta-item">
                  <i class="icon">👤</i>
                  {{ getGenderText(userInfo?.gender) }}
                </span>
              </div>
            </div>
            <button @click="logout" class="btn btn-secondary">退出登录</button>
          </div>
        </div>

        <!-- 登录表单 -->
        <div v-else class="login-form">
          <div class="login-card">
            <div class="login-icon">
              <div class="wechat-logo">💬</div>
            </div>
            <h2>微信一键登录</h2>
            <p class="login-desc">点击下方按钮，快速使用微信登录</p>
            
            <button 
              @click="quickLogin" 
              class="btn btn-primary login-btn"
              :disabled="isLoading"
            >
              <span v-if="isLoading" class="spinner"></span>
              {{ isLoading ? '登录中...' : '微信一键登录' }}
            </button>

            <div class="login-tips">
              <h3>登录说明：</h3>
              <ul>
                <li>• 无需输入密码，安全便捷</li>
                <li>• 自动获取微信用户信息</li>
                <li>• 支持快速授权登录</li>
                <li>• 数据安全加密传输</li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 功能演示 -->
        <div class="demo-section">
          <h2>功能演示</h2>
          <div class="demo-grid">
            <div class="demo-card">
              <div class="demo-icon">🔐</div>
              <h3>安全登录</h3>
              <p>基于微信官方SDK，确保登录安全</p>
            </div>
            <div class="demo-card">
              <div class="demo-icon">⚡</div>
              <h3>快速便捷</h3>
              <p>一键登录，无需记忆密码</p>
            </div>
            <div class="demo-card">
              <div class="demo-icon">🛡️</div>
              <h3>隐私保护</h3>
              <p>严格保护用户隐私信息</p>
            </div>
            <div class="demo-card">
              <div class="demo-icon">📱</div>
              <h3>多端支持</h3>
              <p>支持手机、平板、电脑登录</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useWeChatStore } from '@/stores/wechat'
import { wechatApi } from '@/api/wechat'
import type { UserInfo } from '@/types'

const wechatStore = useWeChatStore()

const isLoading = ref(false)

const isLoggedIn = computed(() => wechatStore.isLoggedIn)
const userInfo = computed(() => wechatStore.userInfo)

const quickLogin = async () => {
  isLoading.value = true
  try {
    const response = await wechatApi.quickLogin()
    
    if (response.code === 200) {
      wechatStore.setUserInfo(response.data)
      alert('登录成功！')
    } else {
      alert('登录失败: ' + response.message)
    }
  } catch (error) {
    console.error('登录失败:', error)
    // 模拟登录成功
    const mockUser: UserInfo = {
      openid: 'mock_openid_' + Date.now(),
      nickname: '微信用户',
      avatar: 'https://via.placeholder.com/100x100/07c160/ffffff?text=WX',
      gender: 1,
      city: '深圳',
      province: '广东',
      country: '中国'
    }
    
    wechatStore.setUserInfo(mockUser)
    alert('模拟登录成功！')
  } finally {
    isLoading.value = false
  }
}

const logout = () => {
  wechatStore.clearUserData()
  alert('已退出登录')
}

const getGenderText = (gender?: number) => {
  const genderMap: Record<number, string> = {
    0: '未知',
    1: '男',
    2: '女'
  }
  return genderMap[gender || 0] || '未知'
}

onMounted(() => {
  // 检查是否已登录
  if (!isLoggedIn.value) {
    // 可以在这里添加自动登录逻辑
  }
})
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  position: relative;
}

.page-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 0 0 30px 30px;
  margin-bottom: 40px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
}

.subtitle {
  font-size: 1.2rem;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

.login-content {
  max-width: 800px;
  margin: 0 auto;
}

.user-info {
  margin-bottom: 40px;
}

.user-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #07c160;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-details {
  flex: 1;
}

.user-details h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.user-id {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 12px;
  font-family: monospace;
}

.user-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
  color: #666;
}

.login-form {
  margin-bottom: 40px;
}

.login-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.login-icon {
  margin-bottom: 20px;
}

.wechat-logo {
  width: 80px;
  height: 80px;
  background: #07c160;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  margin: 0 auto;
  box-shadow: 0 8px 20px rgba(7, 193, 96, 0.3);
}

.login-card h2 {
  font-size: 1.8rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.login-desc {
  color: #666;
  margin-bottom: 30px;
  font-size: 1.1rem;
}

.login-btn {
  width: 100%;
  max-width: 300px;
  padding: 16px;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.login-tips {
  text-align: left;
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
}

.login-tips h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.login-tips ul {
  list-style: none;
  padding: 0;
}

.login-tips li {
  color: #666;
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.demo-section {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.demo-section h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 24px;
  text-align: center;
}

.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.demo-card {
  text-align: center;
  padding: 20px;
  border-radius: 12px;
  background: #f8f9fa;
  transition: transform 0.3s ease;
}

.demo-card:hover {
  transform: translateY(-4px);
}

.demo-icon {
  font-size: 2rem;
  margin-bottom: 12px;
}

.demo-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.demo-card p {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .user-card {
    flex-direction: column;
    text-align: center;
  }
  
  .user-meta {
    justify-content: center;
  }
  
  .title {
    font-size: 2rem;
  }
  
  .subtitle {
    font-size: 1rem;
  }
  
  .demo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
